<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-plus"></i>
        <span>修改元器件</span>
        <el-button
          style="float: right"
          type="primary"
          @click="submitForm('ruleForm')">
          确认修改
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click="resetForm('ruleForm')">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="ruleForm"
          :rules="rules"
          label-width="150px"
          label-position="right"
          >
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="封装" prop="package">
            <el-input v-model="ruleForm.package"/>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="规格" prop="spec">
            <el-input v-model="ruleForm.spec" />
          </el-form-item>
          <el-form-item label="入库数量" prop="stock">
            <el-input v-model="ruleForm.stock" />
          </el-form-item>
          <el-form-item label="存放位置" prop="position">
            <el-input v-model="ruleForm.position" />
          </el-form-item>
          <el-form-item label="货期" prop="delivery">
            <el-input v-model="ruleForm.delivery"/>
          </el-form-item>
          <el-form-item label="所属项目" prop="project">
            <el-select v-model="ruleForm.project" placeholder="选择项目">
              <el-option
                v-for="item in projects"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供货商" prop="supplier">
            <el-input v-model="ruleForm.supplier" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="备注信息"
              v-model="ruleForm.note">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>

import { electronicEdit } from '@/api/electronic'
import { projectAll } from '@/api/project'

export default {
  data() {
    return {
      projects:[],
      ruleForm: {
        name: 'test',
        package: '',
        price: '1.1',
        stock: '2',
        spec: '',
        position: '1-1-1',
        project: '',
        supplier: '',
        delivery: '',
        note: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入元器件名称', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格，小数最多保留4位', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入库存数量, 必须大于等于0', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入存放位置', trigger: 'blur' }
        ],
        project: [
          { required: true, message: '请选择项目', trigger: 'change' }
       ]
      }
    }
  },
  created() {
    this.fetchData()
    this.ruleForm = this.$route.query
  },
  methods: {
    fetchData() {
      projectAll().then(response => {
        this.projects = response.data.items
        console.log(this.projects)
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var numReg = new RegExp(/^[0-9]+$/)
          if(!numReg.test(this.ruleForm.stock)) {
            this.$message('数量-输入错误!')
            return
          }
          var priceReg = new RegExp(/^\d+(\.\d+)?$/)
          if(!priceReg.test(this.ruleForm.price)) {
            this.$message('价格-输入错误!')
            return
          }
          electronicEdit(this.ruleForm).then(response => {
            this.$message(response.message)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>

